html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.loading__spinner {
  width: 32px;
  height: 32px;

  margin-left: -16px;
  display: inline-block;
  position: relative;
}

.spinner {
  width: 32px;
  height: 32px;
  -webkit-animation: spinner 1s linear infinite;
  animation: spinner 1s linear infinite;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden
}

.spinner__circle {
  overflow: hidden;
  left: 50%
}

.spinner__circle,.spinner__circle:before {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%
}

.spinner__circle:before {
  content: " ";
  display: inline-block;
  left: -50%;
  border-radius: 100%;
  box-shadow: inset 0 0 0 2px #fc0
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

  to {
    -webkit-transform: rotate(1turn);
    transform: rotate(1turn)
  }
}

.loading #placeholder {
  width: 100%;
  height: 100%;
  flex-direction: column;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;

}
.loading #placeholder .logo {
  margin-bottom: 30px;
  width: 300px;
  height: auto;
}
.logo__white {
  display: none;
}
#placeholder {
  display: none;
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #181818;
  }

  .logo__black {
    display: none;
  }
  .logo__white {
    display: inline-block;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
  }

  .logo__black {
    display: inline-block;
  }
  .logo__white {
    display: none;
  }
}